<template>
  <div>
    <ProTable
      :data="tableData"
      :page="page"
      :column="column"
      :control="control"
      :rowControl="rowControl"
      :elProps="elProps"
      :disabled="disabled"
      :controlWidth="controlWidth"
      @row-control-click="onRowControlClick"
      @control-click="onControlClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
    >

    </ProTable>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import FouImage from "@/components/foundation/FouImage.vue";
import { elProps,controlWidth } from "./config.js";
import { tableData } from "./data.js";
// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 100, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  image: "圖片",
  date: "時間",
  name: "姓名",
  address: "地址",
};
// 表格顶部操作按钮
const control = ["rowview", "rowedit", "rowdel"];
// 表格行内操作按钮
const rowControl = ["rowview", "rowedit", "rowdel"];
// 未选中数据是 禁用项
const disabled = ['rowdel']
/**表格行内操作
 * @row {object} 行内数据
 * @type {string} 点击按钮类型
 */
const onRowControlClick = ({ scope: { row }, type }) => {
  console.log(row, type);
};
/** 表格顶部操作
 * @type {string} 点击按钮类型
 */
const onControlClick = (type) => {
  // console.log(type);
};
/** 多选
 * @selected {Array} 被选中的行
 */
const onSelectionChange = (e) => {
  console.log(e);
};
/**
 * @e {number} 分页操作后的值（当前页|改变后的每页条数）
 * @type {string} <current|size> 分页操作类型（当前页改变|每页条数改变）
 */
const onPageChange = ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    page.current_page = e;
  }
  if (type == "size") {
    page.per_page = e;
  }
};
</script>

<style  >
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>